<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper"></div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <!-- 高级查询区域 -->
        <a-button v-print="printObject" @click="printOut" type="primary" icon="plus">批量打印二维码</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
      

        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange1 }"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text, record">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img
              v-else
              :src="getImgView(text)"
              :preview="record.id"
              height="25px"
              alt=""
              style="max-width: 80px; font-size: 12px; font-style: italic"
            />
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <span slot="action" slot-scope="text, record">
            <a v-print="printObj" @click="printOut1(record)">打印追溯二维码</a>
            <a-divider type="vertical" />
            <a @click="showErWei(record)">查看追溯二维码</a>
            <a-divider type="vertical" />
            <a @click="toTraceSourceInfo(record)">查看追溯信息</a>
          </span>
        </a-table>
      </div>
    </a-card>
    <div style="width: 0; height: 0; overflow: hidden">
      <div class="qrcode-content" id="printContent">
        <div v-for="(item, index) in this.selectedRowKeys" :key="item.id">
          <!--使用v-print时 设置style="page-break-after:always" 每个div占用一页-->
          <div id="all-info" style="page-break-after: always">
            <div ref="qrcode" class="qrcode"></div>
            <div class="qrcode-info">
              <i>{{ item }}</i>
            </div>
          </div>
        </div>
      </div>
    </div>
      <a-modal
    title="追溯二维码"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    v-model="modelVisible">
	
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
	 <div ref="qrcode2" class="qrcode2" style="margin-left: 22%;"></div>
      <div class="qrcode-info" style="margin-left: 24%;">
        <i>{{ traceCode }}</i>
      </div>
  </a-modal>
    <div style="width: 0; height: 0; overflow: hidden">
      <div class="qrcode-content1" id="printContent1">
        <!--使用v-print时 设置style="page-break-after:always" 每个div占用一页-->

        <div ref="qrcode1" class="qrcode1"></div>
        <div class="qrcode-info">
          <i>{{ traceCode }}</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import QRCode from 'qrcodejs2'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'ZzzsProductRecordingList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      printObject : {
        id:"printContent",
        popTitle:'质量追溯二维码'
      },
      printObj : {
          id:"printContent1",
          popTitle:"质量追溯二维码"
      },
      description: '产品备案管理页面',
      traceCode: '',
      modelVisible: false,
      showOkBtn:false,
      // 表头
      columns: [
      
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '品种',
          align: 'center',
          dataIndex: 'variety'
        },
        {
          title: '产品规格',
          align: 'center',
          dataIndex: 'productStandard'
        },
        {
          title: '产品合格标准',
          align: 'center',
          dataIndex: 'productConformityStandard'
        },
        {
          title: '产地',
          align: 'center',
          dataIndex: 'placeOfOrigin'
        },
        {
          title: '产品介绍',
          align: 'center',
          dataIndex: 'productPresentation'
        },

        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/modules/zzzsProductRecording/getListByCompanyId',

        exportXlsUrl: '/modules/zzzsProductRecording/exportXls'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    qrcode(param, index) {
      console.log(this.$refs.qrcode[index])
      var qrcode = new QRCode(this.$refs.qrcode[index], {
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: `http:/112.102.225.89:51010/traceSourceInfo/${param}` //二维码扫描出来后的内容
      })
    },
    handleCancel(){
      this.modelVisible = false
    },
showErWei(record) {
  this.modelVisible = true;
   
  this.$nextTick(() => {
    this.$refs.qrcode2.innerHTML = ''; // 清空二维码容器
    this.qrcode2(record.id);
    this.traceCode = record.id;

    //打印时会显示两个二维码，去掉第一个
    var childs = document.getElementsByClassName('qrcode2');

    if (childs.length == 2) {
      document.getElementsByClassName('qrcode2').removeChild(childs[0]);
    }
  });
},
    qrcode1(param, index) {
      var qrcode = new QRCode(this.$refs.qrcode1, {
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: `http:/112.102.225.89:51010/traceSourceInfo/${param}` //二维码扫描出来后的内容
      })
    },
    qrcode2(param, index) {
      var qrcode = new QRCode(this.$refs.qrcode2, {
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: `http:/112.102.225.89:51010/traceSourceInfo/${param}` //二维码扫描出来后的内容
      })
    },
    onSelectChange1(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys', selectedRowKeys)
      console.log('selectedRows', selectedRows)
      //前面几页已经勾选的数据id集合
      let idArray = []
      this.selectedRowKeys.forEach(item => {
        idArray.push(item.id)
      })

      //判断是否已经点击分页，如果点击过了分页则之后选择的数据以push方法的形式添加
      if (!this.flag) {
        this.selectedRowKeys = selectedRows
      } else {
        selectedRows.forEach(item => {
          //判断当前的selectedRows中的数据是否已经存在（同一页中需要判断）
          if (!idArray.includes(item.id)) {
            this.selectedRowKeys.push(item)
          }
        })
      }
      //数据选中之后又取消，selectedRows不会更新，需要按照selectedRowKeys中的主键进行过滤判断是否还存在
      let temp = []
      this.selectedRowKeys.forEach(item => {
        if (selectedRowKeys.includes(item.id)) {
          temp.push(item)
        }
      })
      this.selectedRowKeys = temp

      //生成二维码
      this.$nextTick(() => {
        this.selectedRowKeys.forEach((item, index) => {
          console.log(item)
          this.$refs.qrcode[index].innerHTML = ''
          this.qrcode(item, index)
        })
      })

      this.selectedRowKeys = selectedRowKeys
    },
    printOut() {
      this.selectedRowKeys.forEach((item, index) => {
        //打印时会显示两个二维码，去掉第一个
        var childs = document.getElementsByClassName('qrcode')[index].childNodes
        console.log(childs)
        if (childs.length == 2) {
          document.getElementsByClassName('qrcode')[index].removeChild(childs[0])
        }
      })
    },
    printOut1(record) {
      this.$refs.qrcode1.innerHTML = ''
      this.qrcode1(record.id)
      this.traceCode = record.id

      //打印时会显示两个二维码，去掉第一个
      var childs = document.getElementsByClassName('qrcode1')

      if (childs.length == 2) {
        document.getElementsByClassName('qrcode1').removeChild(childs[0])
      }
    },
    initDictConfig() {},
    toTraceSourceInfo(record) {
      this.$router.push({ name: 'traceSource-ZsTraceSouceInfo', query: { productId: record.id } })
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'datetime', value: 'updateTime', text: '更新日期' })
      fieldList.push({ type: 'string', value: 'productName', text: '产品名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'variety', text: '品种', dictCode: '' })
      fieldList.push({ type: 'string', value: 'productStandard', text: '产品规格', dictCode: '' })
      fieldList.push({ type: 'string', value: 'productConformityStandard', text: '产品合格标准', dictCode: '' })
      fieldList.push({ type: 'string', value: 'placeOfOrigin', text: '产地', dictCode: '' })
      fieldList.push({ type: 'Text', value: 'productPresentation', text: '产品介绍', dictCode: '' })
      fieldList.push({ type: 'string', value: 'status', text: '状态', dictCode: 'record_status' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
